開發環境及樣板介紹

我常用的開發環境是create-react-app和react-boilerplate。這邊簡單引用官方文件介紹一下，會分享一下我選用的理由，另外詳細部分我附上連結。

create-react-app

Create React App is a comfortable environment for learning React, and is the best way to start building a new single-page application in React.

Github facebook/create-react-app

Create React App

react-boilerplate

The Hitchhikers Guide to react-boilerplate:

This is a production-ready boilerplate, and as such optimized for browsers, not for beginners. It includes tools to help you manage performance, asynchrony, styling, everything you need to build a real application.

Github react-boilerplate

The Hitchhikers Guide to react-boilerplate

選擇開發環境

這個30天系列我想選用create-react-app來當作快速開發的環境。雖然說我也蠻喜歡react-boilerplate的，因為react-boilerplate不用再自己一個一個安裝redux, reselect, immutableJS, Styled Components...等等常用的package，而且也定期有在更新，github上面關注的人也蠻多的。

但是我覺得create-react-app比起react-boilerplate更適合入門者，因為create-react-app很好心的幫忙把一些複雜的工具(例如webpack, babel)的配置封裝起來，所以大大的降低了入門者的門檻。而且依照我上網找教學文章的經驗，覺得比較容易找到create-react-app的相關資料，例如如何快速將ReactJS Web App部署到github page上，有很多的參考文章是以create-react-app為例，所以為了讓過程順利的進行，少踩一些雷，這次我先選擇create-react-app，讓焦點聚焦在我的主題上。

快速建立一個專案

快速建立一個名為tic-tac-toe的專案

npx create-react-app tic-tac-toe

ex:

進入資料夾之後，執行npm start，即可查看你的app

cd tic-tac-toe
npm start

ex:

檔案結構如下

部署到 GitHub-Pages

通常在這一步的時候，我就會把建立好的專案部署到GitHub-Pages，GitHub-Pages方便我們在GitHub建立靜態網站，在展示作品的時候非常方便，而且官網說

You get one site per GitHub account and organization, and unlimited project sites.

我之前都是用Heroku來展示我的作品，後來有一天發現有GitHub-Pages的時候我覺得很不可思議，unlimited project sites!!! 對前端開發者來說是一大福音啊！

部署的詳細步驟請容我省略，但是我附上我常參考的連結跟大家分享：

Deploy React to GitHub-Pages

GitHub-Pages README.md

Deploying a React App to GitHub Pages

Deploy React to GitHub-Pages to create an amazing website!

Absolute Imports

然後還有一件事情是我會在剛建立好create-react-app專案的時候做，就是我會讓我的讓案可以在import的時候指定絕對路徑，因為有時候指定相對路徑常會造成我在開發上的困擾，例如當專案變複雜的時候，我們很容易寫出下面這樣的東西，很容易寫錯

import { setInit } from ‘../../../../../TicTacToe/actions’;
import {  selectTicTacToe } from ‘../../../../../TicTacToe/selectors;

為了解決這個問題，我還去裝了一些VScode的extension，例如Path Autocomplete，來幫助我不要寫錯。

但是像我們在refactor的時候，或是想要把這段import複製到別的檔案裡面用的時候，相對路徑很容易會改變，所以常被重複使用的import我會乾脆寫成絕對路徑，方便我重複使用。

這邊我分享我在設定的時候常會參考的連結：

Absolute Imports with Create React App

Absolute Imports with Create React App

Setting Up Absolute Paths in create-react-app

補充說明

如果專案不是透過create-react-app建立的，或是我們的create-react-app已經執行npm run eject了，此時若要讓專案可以使用絕對路徑，就需要去修改webpack的path.resolve。

如何扩展 Create React App 的 Webpack 配置

ES6 Import Statement Without Relative Paths Using Webpack

總結一下，今天我們介紹了兩個不錯的開發環境及樣板，然後開始了我們的專案，並且也做了一些前置作業，像是可以部署到Github Page方便我們展示作品，以及如何設定絕對路徑，方便我們往後的開發。

接下來就要直接寫Code啦！我會用到的packages，之後會再邊寫邊介紹。